<template>
    <div class="app-container">
      <el-form :inline="true" :model="form" ref="form-inline">
        <!-- <el-form-item  label="机构" prop="orgId"  :rules="{required: true, message: '机构为空', trigger: 'blur' }"> -->
        <el-form-item  label="机构">
          <el-select v-model="form.orgId" placeholder="请选择机构" filterable clearable @change="orgChange">
              <el-option v-for="i in orgOptions" :key="i.id" :label="i.orgName" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="用户">
          <el-select v-model="form.userId" placeholder="请选择用户"  clearable filterable :disabled="form.orgId === ''">
              <el-option v-for="i in userOptions" :key="i.id" :label="i.username" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="起止日期" prop="entName" >
          <el-date-picker
              v-model="form.date"
              type="daterange"
              value-format="timestamp"
              :default-time="['00:00:00','23:59:59']"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
            <el-button type="primary"  @click="search">查询 </el-button>
            <el-button :disabled="tableData.length == 0" type="success" @click="handleExport" style="margin-left: 20px;">导出</el-button>
        </el-form-item>
      </el-form>

      <Table 
          class="businessFormTable"
          ref="Table" 
          :tableData="tableData" 
          :tableHeadData="tableHeadData" 
          v-loading="tableLoading"
      />
    </div>
  </template>
  
  <script>
  import Table from '@/components/table/table.vue';
  import { sQuery,sListOrg,sListUser } from '@/api/user'
  import { JueceCommon } from './juece.common'
  import { exportXlsx } from '@/utils/index'
 
  export default {
    components:{
      Table
    },
    data() {
      return {
        form:{
          date:[],
          orgId:'',
          userId:''
        },
        orgOptions:[],
        userOptions:[],
        tableData:[],
        tableHeadData:[],
        tableLoading:false,
 
        total:0
      }
    },
    async created(){
      this.jueceCommon = new JueceCommon(this);
      const res = await sListOrg();
      this.orgOptions = res.data;
    },
    methods:{
      async search(){
        //console.log('onSubmit',this.form);
        this.tableLoading = true;
        const { date,orgId,userId } = this.form; 
        const params = {
          startTime:date && date[0] ? date[0] : null,
          endTime:date && date[1] ? date[1] : null,
          orgId,
          userId:userId === '' ?  null : userId
        };
        const res = await sQuery(params);
        //console.log('res',res);
        const { data } = res;
        let entSum = 0;
        let bzxNum = 0;
        let gszcNum = 0;
        let ktggNum = 0;
        let laxxNum = 0;
        let nsxyNum = 0;
        let sbNum = 0;
        let xzgxfNum = 0;
        data.forEach(i => {
          entSum += Number(i.entNum)
          bzxNum += Number(i.bzxNum)
          gszcNum += Number(i.gszcNum)
          ktggNum += Number(i.ktggNum)
          laxxNum += Number(i.laxxNum)
          nsxyNum += Number(i.nsxyNum)
          sbNum += Number(i.sbNum)
          xzgxfNum += Number(i.xzgxfNum)
        })
        const sum = {
          createTime:'合计',
          entNum:entSum,
          bzxNum,
          gszcNum,
          ktggNum,
          laxxNum,
          nsxyNum,
          sbNum,
          xzgxfNum
        }
        //console.log('sum',sum);
        this.tableData = [...data,sum];
        //this.tableData = this.jueceCommon.fomatData_ES([...data,...data,...data,...data,...data,...data]);
        this.tableHeadData = this.jueceCommon.tableHead_Ss(data[0],this);
        this.tableLoading = false;
        //this.getTableList(this.currentPageParams)
      },
      async orgChange(val){
        //console.log('orgChange',val);
        this.form.userId = '';
        if(val === '') return
        const res = await sListUser({orgId:val});
        this.userOptions = res.data;
        //console.log('res',res)
      },
      handleExport(){
        this.$confirm('导出文件请在浏览器的 下载内容 处查看,是否立即下载?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          exportXlsx('.Table','查询统计表')
        })
        
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  
  </style>